import React,{useCallback, useEffect, useRef} from 'react';
import {ScaleContainerProps} from '.'
import styled from 'styled-components';
import {observer,unobserved } from './observerUtil'

interface SingleObserverProps extends ScaleContainerProps{

}

const WrapDomStyle = styled.div`
  width: 100%;
  height: 100%;
  position: relative;
  background-color: pink;
`


function SingleObserver(props:SingleObserverProps) {
  const {children,disabled } = props

  const wrapDomRef = useRef<HTMLDivElement>(null);
  const propsRef = useRef<SingleObserverProps>(props);
  propsRef.current = props


  const onInternalResize = useCallback((target:HTMLDivElement)=>{

  },[])

  useEffect(()=>{
    const currentDom = wrapDomRef.current
console.log('currentDom: ',currentDom);
    if(currentDom && !disabled){
      // 监听
      console.log(12223);
      
      observer(currentDom,onInternalResize)
    }
    return ()=>{
      // 取消监听
      unobserved(currentDom,onInternalResize)

    }
  },[disabled,wrapDomRef.current])

  return (
    <WrapDomStyle ref = {wrapDomRef}>
      {children}
    </WrapDomStyle>
  );
}

export default SingleObserver;
